<template>
  <section class="batchConfig">
    <el-dialog
      id="configcar"
      v-dialogDrag
      title="导入配车"
      :visible.sync="popupsVisible"
      width="70%"
      center
      :append-to-body="true"
      :lock-scroll="true"
      :before-close="handleClose"
    >
      <dialogHeader
        slot="title"
        :title="'导入手工配车'"
        :style-type="$store.state.app.dialogType"
      />
      <el-row class="btns">
        <el-col :span="8" :offset="16">
          <el-button
            style="margin: 0 10px"
            class="iconfont icon-importTemplateDownload"
            @click="downLoadTemplate"
          > 导入模板下载 </el-button>
          <el-upload
            ref="upload"
            class="upload-demo"
            action
            :http-request="handleChange"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
          >
            <el-button
              type="primary"
              class="iconfont icon-importTemplate"
            >导入配车
            </el-button>
          </el-upload>
          <el-button
            class="iconfont icon-export"
            style="margin: 0 10px"
            type="primary"
            @click="tableExport"
          >
            导出
          </el-button>
        </el-col>
      </el-row>
      <el-row ref="vailComponentList4" :gutter="26">
        <el-table
          v-loading="loading"
          element-loading-text="正在导入Excel文件"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.3)"
          :data="listData"
          border
          style="width: 100%"
          max-height="300"
        >
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column prop="saleOrderCode" label="DMS订单编号" width="150" align="center" />
          <el-table-column prop="remark" label="批量配车说明" width="120" align="center" />
          <el-table-column prop="orderStatus" label="订单状态" align="center" />
          <el-table-column prop="custName" label="客户名称" align="center" />
          <el-table-column prop="custTEL" label="客户联系电话" width="100" align="center" />
          <el-table-column prop="salePlanCode" label="销售计划号" width="120" align="center" />
          <el-table-column prop="vin" label="VIN码" align="center" />
          <el-table-column prop="carConfigCN" label="车型配置" align="center" />
          <el-table-column prop="carColorName" label="车身颜色" align="center" />
          <el-table-column prop="carIncolorName" label="内饰颜色" align="center" />
          <el-table-column prop="optionalPagName" label="选装包" align="center" />
          <el-table-column prop="carHouseName" label="仓库名称" align="center" />
        </el-table>
      </el-row>
      <div
        slot="footer"
        class="dialog-footer"
      />
    </el-dialog>
  </section>
</template>

<script>
import mixTable from '@/components/basicComponent/mixTable'
import { exportExcel } from '@/utils/exportExcel'
import api from '@/api/testDriver'
export default {
  name: 'BatchConfigCar',
  components: {
    // lableName: () => import('@/components/lableName'), // 标题溢出样式组件
    dialogHeader: () => import('@/components/dialogHeader'), // 弹窗标题,
    mixTable
  },
  props: {
    // 弹窗开关
    popupsVisible: { type: Boolean, default: false }
    // 传入的选中数据
    // multipleData: { type: Array, default: () => ([]) }
  },
  data() {
    return {
      loading: false,
      // 表格数据
      listData: [],
      // 表格数据
      tableCols: [
        {
          codeField: 'batchRes',
          label: '导入配车说明'
        },
        {
          codeField: 'DMSOrderId',
          label: 'DMS订单编号'
        },
        {
          codeField: 'orderStatus',
          label: '订单状态'
        },
        {
          codeField: 'customerName',
          label: '客户名称'
        },
        {
          codeField: 'customerPhone',
          label: '客户联系电话'
        },
        {
          codeField: 'salesPlanId',
          label: '销售计划号'
        },
        {
          codeField: 'VINCode',
          label: 'VIN码'
        },
        {
          codeField: 'vehicleConfig',
          label: '基础车型'
        },
        {
          codeField: 'bodyColor',
          label: '车身颜色'
        },
        {
          codeField: 'innerColor',
          label: '内饰颜色'
        },
        {
          codeField: 'selectPack',
          label: '选装包'
        },
        {
          codeField: 'storeName',
          label: '仓库名称'
        }
      ]
    }
  },
  watch: {
    'popupsVisible': {
      handler(val) {
        this.listData = []
      },
      immediate: true
    }
  },
  methods: {
    handleClose() {
      this.$confirm('确认关闭窗口?', '提示')
        .then(() => {
          this.$emit('update:popups-visible', false)
        })
    },
    // 上传
    attachHandleChange(param) {
      const url = api.importTestDrive.APIUrl

      this.loading = true
      this.$requestUpload(url, param)
        .then((response) => {
          this.uploadSuccess(response)
        })
        .catch((err) => {
          this.loading = false
          this.listData = []
          console.info(err)
        })
    },
    // 上传返回结果处理
    uploadSuccess(response) {
      if (response.result === '1' && response.msg !== '') {
        this.$message({ type: 'success', message: response.msg })
        this.loading = false
        this.listData = response.rows
      } else if (response.result === '0') {
        this.$message({ type: 'warning', message: response.msg })
        this.listData = []
        // this.$refs.searchBtns.$refs.upload[0].clearFiles()
        this.loading = false
      } else {
        this.$alert(`文件导入失败${response.msg}`, '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
          .then(() => {
            this.loading = false
          })
      }
    },
    handleChange(fileparams) {
      this.attachHandleChange(fileparams)
    },
    // 下载模板
    downLoadTemplate() {
      const loading = this.$loading({
        text: '正在下载Excel模板...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.4)'
      })
      this.$requestAPI({
        method: 'GET',
        variables: { dataType: 'excel' },
        apiUrl: api.downloadTemplate.APIUrl
      }).then(res => {
        this.$utils.downloadFile(res, '导入配车模板.xlsx')
        loading.close()
      })
    },
    // 文件格式过滤
    beforeAvatarUpload(file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      if (!extension && !extension2) {
        this.$alert('上传文件只能为Excel文件', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
      }
      return extension || extension2
    },
    // 导出钮点击事件
    tableExport() {
      const loading = this.$loading({
        text: '正在导出Excel文件...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.4)'
      })
      // exportExcel.call(this, '/fsdjj', '试驾车配车')
      const title = this.$route.matched[this.$route.matched.length - 1].meta.title.replace('/', '')
      const fileSuffix = this.$config.excelExp
      const fileName = this.$utils.fileNameWithTime(`${title}${fileSuffix}`)
      if (this.listData.length) {
        this.$requestAPI({
          apiUrl: api.exportTestDrive.APIUrl,
          variables: {
            exportData: this.listData,
            dataType: 'excel'
          }
        }).then(res => {
          this.$utils.downloadFile(res, fileName)
          loading.close()
        })
      } else {
        this.$message('没有数据可以导出,请先做导入操作!')
      }
    }

  }
}
</script>

<style scoped lang="scss">
  .btns {
    margin-bottom: 10px;
  }
  .el-table {
    margin: 5px 0;
  }
</style>
